<template>
  <div class="salary-reference">
    <!-- 头部 -->
    <!-- <header class="header">
      <span class="time">09:15</span>
      <h1>教员薪酬参考</h1>
      <div class="icons">
        <i class="icon-back"></i>
        <i class="icon-more"></i>
        <i class="icon-search"></i>
      </div>
    </header> -->

    <!-- 主体内容 -->
    <main class="content">
      <!-- 薪酬表格 -->
      <section class="salary-table">
        <p class="note">每小时薪酬，以下仅供参考</p>
        <table>
          <thead>
            <tr>
              <th>年级</th>
              <th>大学生</th>
              <th>研究生</th>
              <th>专职教员</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in salaryData" :key="index">
              <td>{{ row.grade }}</td>
              <td :class="row.universityClass">{{ row.university }}</td>
              <td :class="row.masterClass">{{ row.master }}</td>
              <td :class="row.professionalClass">{{ row.professional }}</td>
            </tr>
          </tbody>
        </table>
      </section>

      <!-- 教员描述 -->
      <section class="teacher-description">
        <div v-for="(description, key) in teacherDescriptions" :key="key" :class="description.class">
          <h3>{{ description.title }}</h3>
          <p>{{ description.text }}</p>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      salaryData: [
        { grade: '1-2年级', university: '50', master: '60', professional: '80', universityClass: 'university', masterClass: 'master', professionalClass: 'professional' },
        { grade: '3-4年级', university: '50', master: '60', professional: '80', universityClass: 'university', masterClass: 'master', professionalClass: 'professional' },
        { grade: '5-6年级', university: '50', master: '60', professional: '80', universityClass: 'university', masterClass: 'master', professionalClass: 'professional' },
        { grade: '初一', university: '60', master: '70', professional: '100', universityClass: 'university', masterClass: 'master', professionalClass: 'professional' },
        { grade: '初二', university: '70', master: '80', professional: '100', universityClass: 'university', masterClass: 'master', professionalClass: 'professional' },
        { grade: '初三', university: '80', master: '90', professional: '150', universityClass: 'university', masterClass: 'master', professionalClass: 'professional' },
        { grade: '高一', university: '90', master: '100', professional: '150', universityClass: 'university', masterClass: 'master', professionalClass: 'professional' },
        { grade: '高二', university: '100', master: '110', professional: '200', universityClass: 'university', masterClass: 'master', professionalClass: 'professional' },
        { grade: '高三', university: '120', master: '130', professional: '200', universityClass: 'university', masterClass: 'master', professionalClass: 'professional' }
      ],
      teacherDescriptions: [
        { title: '大学生教员', text: '在读或已毕业大学生，能提供学历证书，有一定家教经验，更有共同语言，适合基础偏弱的伴学巩固', class: 'university-teacher' },
        { title: '研究生教员', text: '在读或已毕业研究生，能提供学历证书，有一定家教经验，时间更为充裕，阅历和辅导经验更为丰富', class: 'master-teacher' },
        { title: '专业级教员', text: '有教师资格证，非在职在岗，多年从事教育行业，教龄长经验丰富，对重难点以及方向更有清晰把握', class: 'professional-teacher' }
      ]
    };
  }
};
</script>

<style scoped>
/* 在这里添加CSS样式 */
.salary-reference {
  font-family: Arial, sans-serif;
}

.header {
  background-color: #00bfa5;
  color: white;
  padding: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content {
  padding: 20rpx;
}

.salary-table .note {
  color: red;
  margin-bottom: 10rpx;
  text-align: center;
}

.salary-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.salary-table th,
.salary-table td {
  border: 1rpx solid black;
  padding: 8rpx;
  text-align: center;
}

.salary-table th {
  background-color: black;
  color: white;
}

.university {
  background-color: lightgreen;
}

.master {
  background-color: lightblue;
}

.professional {
  background-color: lightgoldenrodyellow;
}

.teacher-description div {
  margin-bottom: 20rpx;
  margin-top: 30rpx;
}

.university-teacher h3 {
  color: green;
}

.master-teacher h3 {
  color: blue;
}

.professional-teacher h3 {
  color: orange;
}

/* 添加其他样式... */
</style>